<!doctype html>//西部游览推荐路线
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<title>图片图层</title>
		<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
		<script src="//webapi.amap.com/maps?v=2.0&key=98c485ff1e3c2b4318481832bee4355a&plugin=AMap.Geocoder"></script>
		<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
		<style>
			html,
			body,
			#container {
				margin: 0;
				padding: 0;
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div id="container"></div>
		<script type="text/javascript">
			var imageLayer = new AMap.ImageLayer({
				url: 'http://yyjcs.top/dtdmeo/1.jpg',
				bounds: new AMap.Bounds(
					[116.392159, 39.913331], //x
					[116.401858, 39.923715] //y
				),
				zooms: [15, 20]
			});
			var map = new AMap.Map('container', {
				center: [116.39705, 39.917301],
				zoom: 15,
				layers: [
					AMap.createDefaultLayer(),
					imageLayer,
				]
			});

			//点添加
			//1
			var marker1 = new AMap.Marker({
				position: new AMap.LngLat(116.397237, 39.913363),
				title: '午门',
				map: map
			});
			marker1.setLabel({
				offset: new AMap.Pixel(5, 5),
				content: "1午门"
			})

			//2
			var marker2 = new AMap.Marker({
				position: new AMap.LngLat(116.397119, 39.915231),
				title: '太和门',
				map: map
			});
			marker2.setLabel({
				offset: new AMap.Pixel(5, 5),
				content: "2太和门"
			})
			//3
			var marker3 = new AMap.Marker({
				position: new AMap.LngLat(116.394672, 39.915371),
				title: '武英殿',
				map: map
			});
			marker3.setLabel({
				offset: new AMap.Pixel(5, 5),
				content: "3武英殿"
			})
			//4
			var marker4 = new AMap.Marker({
				position: new AMap.LngLat(116.397119, 39.917331),
				title: '太和殿',
				map: map
			});
			marker4.setLabel({
				offset: new AMap.Pixel(5, 5),
				content: "4太和殿"
			})
			//5
			var marker5 = new AMap.Marker({
				position: new AMap.LngLat(116.397119, 39.917931),
				title: '保和殿',
				map: map
			});
			marker5.setLabel({
				offset: new AMap.Pixel(5, 5),
				content: "5保和殿"
			})
			//6
			var marker6 = new AMap.Marker({
				position: new AMap.LngLat(116.394319, 39.919031),
				title: '慈宁宫',
				map: map
			});
			marker6.setLabel({
				offset: new AMap.Pixel(5, 5),
				content: "6慈宁宫"
			})
			//7
			var marker7 = new AMap.Marker({
				position: new AMap.LngLat(116.393619, 39.919431),
				title: '寿康宫',
				map: map
			});
			marker7.setLabel({
				offset: new AMap.Pixel(5, 5),
				content: "7寿康宫"
			})
			//8
			var marker8 = new AMap.Marker({
				position: new AMap.LngLat(116.395619, 39.919731),
				title: '养心殿',
		 	map: map
			});
			marker8.setLabel({
				offset: new AMap.Pixel(5, 5),
				content: "8养心殿"
			})
			//9
			var marker9 = new AMap.Marker({
				position: new AMap.LngLat(116.397200, 39.920200),
				title: '乾清宫',
				map: map
			});
			marker9.setLabel({
				offset: new AMap.Pixel(5, 5),
				content: "9乾清宫"
			})
			//10
			var marker10 = new AMap.Marker({
				position: new AMap.LngLat(116.397200, 39.920900),
				title: '坤宁宫',
				map: map
			});
			marker10.setLabel({
				offset: new AMap.Pixel(5, 5),
				content: "10坤宁宫"
			})
			//11
			var marker11 = new AMap.Marker({
				position: new AMap.LngLat(116.395900, 39.920200),
				title: '永寿宫',
				map: map
			});
			marker11.setLabel({
				offset: new AMap.Pixel(5, 5),
				content: "11永寿宫"
			})
			//12
			var marker12 = new AMap.Marker({
				position: new AMap.LngLat(116.395200, 39.920200),
				title: '太极殿',
				map: map
			});
			marker12.setLabel({
				offset: new AMap.Pixel(5, 5),
				content: "12太极殿"
			})
			//13
			var marker13 = new AMap.Marker({
				position: new AMap.LngLat(116.395200, 39.920800),
				title: '长春宫',
				map: map
			});
			marker13.setLabel({
				offset: new AMap.Pixel(5, 5),
				content: "13长春宫"
			})
			//14
			var marker14 = new AMap.Marker({
				position: new AMap.LngLat(116.395900, 39.920900),
				title: '翊坤宫',
				map: map
			});
			marker14.setLabel({
				offset: new AMap.Pixel(5, 5),
				content: "14翊坤宫"
			})
			//15
			var marker15 = new AMap.Marker({
				position: new AMap.LngLat(116.395900, 39.921200),
				title: '储秀宫',
				map: map
			});
			marker15.setLabel({
				offset: new AMap.Pixel(5, 5),
				content: "15储秀宫"
			})
			//16
			var marker16 = new AMap.Marker({
				position: new AMap.LngLat(116.395200, 39.921200),
				title: '咸福宫',
				map: map
			});
			marker16.setLabel({
				offset: new AMap.Pixel(5, 5),
				content: "16咸福宫"
			})
			//17
			var marker17 = new AMap.Marker({
				position: new AMap.LngLat(116.397200, 39.921600),
				title: '御花园',
				map: map
			});
			marker17.setLabel({
				offset: new AMap.Pixel(5, 5),
				content: "17御花园"
			})
			//18
			var marker18 = new AMap.Marker({
				position: new AMap.LngLat(116.397200, 39.922200),
				title: '神武门',
				map: map
			});
			marker18.setLabel({
				offset: new AMap.Pixel(5, 5),
				content: "18神武门"
			})


			// 矢量图 路线规划

			var path = [ //每个弧线段有两种描述方式
				[116.397206, 39.913489], //起点
				//路线图
				[116.397206, 39.914689],
				[116.394606, 39.914689],
				[116.394606, 39.914989],
				[116.394606, 39.914689],
				[116.395806, 39.914689],
				[116.397006, 39.91500],
				[116.397006, 39.91860],
				[116.394200, 39.91860],
				[116.394200, 39.91880],
				[116.394200, 39.91860],
				[116.396300, 39.91860],
				[116.396300, 39.91960],
				[116.396100, 39.91960],
				[116.396300, 39.91960],
				[116.396300, 39.92000],
				[116.395550, 39.92000],
				[116.395550, 39.92140],
				[116.395550, 39.92000],
				[116.397100, 39.92000],
				[116.397100, 39.92250],
			];
			var polyline = new AMap.Polyline({
				path: path,
				isOutline: true,
				outlineColor: '#ffeeff',
				borderWeight: 3,
				strokeColor: "#3366FF",
				strokeOpacity: 1,
				strokeWeight: 6,
				// 折线样式还支持 'dashed'
				strokeStyle: "solid",
				// strokeStyle是dashed时有效
				strokeDasharray: [10, 5],
				lineJoin: 'round',
				lineCap: 'round',
				zIndex: 50,
			})
			map.add([polyline]);
			map.setFitView();
		</script>
	</body>
</html>
